<template>
	<view class="content">
		<!-- #ifdef H5 -->
			<uni-nav-bar left-icon="back" left-text="返回" @clickLeft="backLastPage" class="nav-bar" :title="hotelDetail.storeName">
			</uni-nav-bar>
		<!-- #endif -->
		
		<view class="banner">
			<swiper>
				<swiper-item v-for="item, index in bed_banner" :key="index">
					<image :src="item" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- <view class="production">
			
		</view>
		 -->
		 
		 <!-- 居住时间 -->
		 <!-- 日期选择 -->
		 <view  class="date-picker u-" @click="choseTime" v-if="choiceDate.length">
		 	<view class="date">
		 		<text>周{{choiceDate[0].week}}入住</text>
		 		<text>{{choiceDate[0].re}}</text>
		 	</view>
		 	<view class="night-num">
		 		<text>{{dayCount}}晚</text>
		 	</view>
		 	<view class="date">
		 		<text>周{{choiceDate[1].week}}离店</text>
		 		<text>{{choiceDate[1].re}}</text>
		 	</view>
		 </view>
		
	
		
		<view class="hotel-bed-list">
			
			<view class="hotel-bed" @click="open(index)"  v-for="item,index in roomCategory" :key="index">
				
				<view class="bed">
					<view class="left-img">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="right-content">
						<view class="bed-category">
							{{item.suk}}
						</view>
						<view class="area-and-bed">
							<text class="area">{{'12-22m^2'}}</text>
							<text class="bed-area">{{'1张床1.1单人床'}}</text>
						</view>
						
						<view class="person-num">
							<text>可住</text>
							<text class="nums">{{2}}</text>
							<text>人</text>
						</view>
						
						<view class="prices">
							<text class="num">{{item.price}} </text>

							
							<view class="order">
								<text>在线订购</text>
							</view>
						</view>
					</view>
				</view>
				
				
			</view>
			
			
			
			
		</view>
		
		
		<uni-popup ref="popup" type="bottom">
			
			<view class="popup-content">
				<view class="bed-title">
					<text>{{upopInfo.suk}}</text>
				</view>
				
				<scroll-view :scroll-y="true" class="scroll-view">
					<view class="bed-banner">
						<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
							<!-- <swiper-item v-for="item, index in bed_banner" :key="index" @click="preImage(index)">
								<view class="swiper-item">
									<image :src="item" mode=""></image>
								</view>
							</swiper-item> -->
							
							<swiper-item>
								<view class="swiper-item">
									<image :src="upopInfo.image" mode=""></image>
								</view>
							</swiper-item>
						</swiper>
					</view>
					
					<!-- 房间设施 -->
					<view class="room-equipment">
						<view class="title">
							<text>房间设施</text>
						</view>
						
						<view class="equipment-content">
							
							<view class="equipment">
								<!-- <image></image> -->
								<text>32-35</text>
							</view>
							
							<view class="equipment">
								<!-- <image></image> -->
								<text>wifi</text>
							</view>
							
							<view class="equipment">
								<!-- <image></image> -->
								<text>可住2人</text>
							</view>
							
							<view class="equipment">
								<!-- <image></image> -->
								<text>wifi</text>
							</view>
							
							<view class="equipment">
								<!-- <image></image> -->
								<text>可住2人</text>
							</view>
						</view>
					</view>
								
					<!-- 分界线 -->
					
					<view class="line"></view>
					
					<view class="prev-info">
						<view class="title">
							<text>预订须知</text>
						</view>
						
						<view class="title2">
							<text>取消规则</text>
							<text>限时取消 18:00 前可免费取消</text>
						</view>
					</view>
					
					<view class="line"></view>
					
					<view class="prev-info">
						<view class="title">
							<text>预订须知</text>
						</view>
						
						<view class="title2">
							<text>取消规则</text>
							<text>限时取消 18:00 前可免费取消</text>
						</view>
					</view>
					
					<view class="line"></view>
					
					
				</scroll-view>
				
				
				<view class="bottom-buy">
					<view class="bottom-content">
						<view class="price">
							<text class="dw">￥</text>
							<text class="nums">{{upopInfo.price}}</text>
						</view>
						
						<view class="buy-button" @click="gotoHotelOrder()">
							<text>立即预订</text>
						</view>
					</view>
				</view>
			</view>
			
		</uni-popup>
		<!-- 日期选择插件 -->
		<!--          监听日期改变的事件，  设置无界面            控制日期显示 --> 
		<date-picker @change="changeDate" :modal="true" :show="showCaledar"></date-picker>
	</view>
</template>

<script>
	import DatePicker from '@/components/date-picker/date-picker.vue'
	import {hotelDetail, hotelPreOrder} from '@/api/hotel.js'
	export default {
		components:{
			DatePicker,
		},
		data() {
			return {
				hotelDetail: {},
				showCaledar: false,
				choiceDate: [],
				dayCount: 0,
				// 保存不同类型的图片展示
				bed_banner: [],
				id: null,
				roomCategory: [],
				upopInfo: {},
				preOrderNo: null
			}
		},
		onLoad(options) {  
			this.id = options.id;
			this.getHotelDetail()
		
		},
		onShow() {
			this.preOrderNo = null
		},
		methods: {
			
			
			// 获取酒店详情
			async getHotelDetail() {
				
				const res = await hotelDetail(this.id)
				
				// 每个房间的信息
				for (let i in res.data.productValue) {
					this.roomCategory.push(res.data.productValue[i])
				}
				console.log(this.roomCategory)
				
				this.bed_banner = res.data.productInfo.sliderImage.replace(/"/g, '').replace(/\[/g,'').replace(/\]/g,'').split(',')
				this.hotelDetail = res.data.productInfo

			},
			
			// 控制选择器的弹出和显示
			choseTime() {
				// console.log("yes")
				this.showCaledar = !this.showCaledar
			},
			// 捕获子组件传递过来的参数
			changeDate({choiceDate, dayCount}) {
				// console.log(choiceDate + " " + dayCount)
				this.choiceDate = choiceDate
				this.dayCount = dayCount
				// this.dateStr = '入住从 ' + choiceDate[0].re + ' (星期' + choiceDate[0].week + ')  到 ' + choiceDate[1].re + '(星期' + choiceDate[1].week + ')' + '  共 ' + dayCount + ' 晚 ';
				// console.log(this.dateStr)
			},
			// 弹出酒店内容
			open(index){
			    // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			    this.upopInfo = this.roomCategory[index]
				
				this.$refs.popup.open('bottom')
			},
			
			// 预览不同类型房间的图片
			preImage(index) {
				uni.previewImage({
					urls: this.bed_banner,
					indicator: 'number',
					current: index
				})
			},
			// 创建预览订单
			async createPreOrder() {
				const params = {
					orderDetails: [
						{
							productId: this.hotelDetail.id,
							attrValueId: this.upopInfo.id,
							productNum: this.dayCount,
							// 开始时间和结束时间
							beginTime: this.choiceDate[0].re,
							endTime: this.choiceDate[1].re
						}
					],
					preOrderType: 'buyNow',
				}
				const res = await hotelPreOrder(params)
				this.preOrderNo = res.data.preOrderNo 
				
			},
			// 跳转到预订酒店页面
			async gotoHotelOrder() {
				// 创建预览订单
				await this.createPreOrder()
				
				this.$refs.popup.close()
				
				uni.navigateTo({
					url: `/pages/hotel/hotelOrderPre/hotelOrderPre?preOrderNo=${this.preOrderNo}` 
				})
			},
			
			// 返回上一页
			backLastPage() {
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 750rpx;
		
		.nav-bar {
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 2;
			
			
		}
		margin-top: 100rpx;

		.banner {

			swiper {
				height: 380rpx;
			}
			width: 100%;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
		
		
		.date-picker {
			
			margin: 0 20rpx;
			margin-top: 30rpx;
			
			display: flex;
			justify-content: center;
			// justify-content: center;
			align-items: center;
			
			background-color: $u-type-success;
			
			// border-radius: 20rpx;
			padding: 10rpx;
			color: #FFFFFF;
			.date {
				display: flex;
				flex-direction: column;
				
				// align-items: center;	
				text {
					
					font-size: 30rpx;
					font-weight: 700;
				}
				
				text:nth-child(1) {
					font-size: 16rpx;
					// color: #C0C0C0;
					font-weight: 100;
				}
				
			}
			
			.night-num {
				margin: 0 80rpx;	
				text {
					font-size: 30rpx;
				}
			}
		}
		
		.production {
			margin: 0 30rpx;
			margin-top: 380rpx;
			
			height: 500rpx;
			
			
			border-radius: 30rpx;
			background-color: #FFFFFF;
		}
		
		.hotel-bed-list {
			
			margin-top: 40rpx;
			width: 100%;
			
			.hotel-bed {
				width: 100%;
				height: 280rpx;
				
				background-color: #FFFFFF; 
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				margin-bottom: 20rpx;
				.bed {
					width: 96%;
					height: 90%;
					
					// background-color: #007AFF;
					display: flex;
					// background-color: #FFFFFF;
					.left-img {
						width: 200rpx;
						height: 100%;
						
						// background-color: #1AAD19;
						
						image {
							width: 100%;
							height: 100%;
							
							border-radius: 20rpx;
						}
					}
					
					.right-content {
						padding: 0 20rpx;
						width: 500rpx;
						// align-items: center;
						height: 100%;
						
						.bed-category {
							font-size: 40rpx;
							font-weight: 700;
							margin-bottom: 10rpx;
						}
						
						.area-and-bed {
							font-size: 30rpx;
							color: #3C3C3C;
							margin-bottom: 10rpx;
							.area {
								margin-right: 20rpx;
							}
						}
						
						.person-num {
							font-size: 30rpx;
							margin-bottom: 20rpx;
						}
						.prices {
							display: flex;
							align-items: center;
							justify-content: space-between;
							.num {
								font-size: 40rpx;
								color: red;
							}
							
							
							.order {
								width: 150rpx;
								height: 70rpx;
								
								
								margin-left: 200rpx;
								background-color: $u-type-success;
								
								color: #FFFFFF;
								display: flex;
								align-items: center;
								justify-content: center;
								font-weight: 700;
							}
						}
					}
				}
			}
		}
	
		
		.popup-content {
			width: 100%;
			height: 1100rpx;
			background-color: #FFFFFF;
			
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			position: relative;
			.bed-title  {
				
				height: 100rpx;
				
				padding-left: 50rpx;
				padding-top: 20rpx;
				text {
					font-size: 35rpx;
					font-weight: 700;
				}
				
				
			}
			// 设置滚动
			.scroll-view {
				position: absolute;
				left: 0;
				right: 0;
				top: 100rpx;
				bottom: 100rpx;
				.bed-banner {
					width: 100%;
					height: 400rpx;
					
					swiper {
						width: 100%;
						height: 100%;
						.swiper-item {
							
							width: 100%;
							height: 100%;
							
							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
						
				.room-equipment {
					width: 100%;
					
					margin: 0 50rpx;
					margin-top: 20rpx;
					.title {
						
						text {
							font-size: 40rpx;
						}
					}
					
					.equipment-content {
						width: 100%;
						display: flex;
						justify-content: left;
						flex-wrap: wrap;
						
						.equipment {
							padding: 10rpx 0;
							width: 30%;
							
							text {
								font-size: 30rpx;
								color: #007AFF;
							}
						}
					}
					
				}
						
				.line {
					margin: 0 50rpx;
					// height: 5rpx;
					margin-top: 40rpx;
					border-bottom: 5rpx solid #C8C7CC;
				}
				
				.prev-info {
					width: 100%;
					
					margin: 0 50rpx;
					margin-top: 40rpx;
					.title {
						
						text {
							font-size: 40rpx;
						}
					}
					
					.title2  {
						display: flex;
						flex-direction: column;
						text:nth-child(1) {
							padding: 10rpx 0;
							font-size: 35rpx;
						}
						text:nth-child(2) {
							font-size: 30rpx;
							color: #C0C0C0;
						}
					}
				}
			}
			
			
			
			.bottom-buy {
				position: absolute;
				bottom: 0;
				left: 0;
				height: 100rpx;
				width: 100%;
				// background-color: #007AFF;
				border-top: 1rpx solid #C0C0C0;
				
				
				.bottom-content {
					margin: 0 50rpx;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.price {
						color: #E65339;
						.dw {
							font-size:20rpx;
						}
						.nums {
							font-size: 40rpx;
						}
						
					}
					
					.buy-button {
						width: 35%;
						height: 80%;
						
						background-color: $u-type-success;
						
						display: flex;
						align-items: center;
						justify-content: center;
						text {
							font-size: 40rpx;
							color: #FFFFFF;
							// font-weight: 700;
						}
					}
				}
				
			}
		}
	}
</style>
